import React, { useState, useEffect } from 'react'
import Modal from '@mui/material/Modal';
import style from './index.module.scss';
import PropTypes from 'prop-types';

UserModal.propTypes = {
    modalFlag: PropTypes.bool.isRequired,
    handleModal: PropTypes.func.isRequired,
    data: PropTypes.array.isRequired,
    changeClassify: PropTypes.func.isRequired
}
UserModal.defaultProps = {
    data: [],
    modalFlag: false
}


export default function UserModal(props) {
    const { modalFlag, handleModal, data, changeClassify} = props;
    const [list,setList] = useState(data[0].data);
    const [leftActive,setLeftActive] = useState(data[0].name);
    const [rightActive,setRightActive] = useState(data[0].data[0].name)
    const height = document.body.scrollHeight * 0.36;
    const leftClick = (e) => {
        setLeftActive(e.name);
        setList(e.data);
    }
    const rightClick = (e) => {
        setRightActive(e.name)
        changeClassify(e.name)
        handleModal(false);
    }
    return (
        <>
                <Modal
                open={modalFlag}
                onClose={() => {handleModal(false);}}
                aria-labelledby="modal-modal-title"
            >
                <div className={style.modal}>
                    <div className={style.head}>
                        <div></div>
                        <div className={style.title}>选择兼职类型</div>
                        <div onClick={() => {handleModal(false)}} className={style.edit}>
                            取消
                        </div>
                    </div>
                    <div className={style.content} style={{marginBottom: '20px'}}>
                        <div className={style.left} style={{height: height + 'px',paddingBottom: '80px',marginTop: '5px'}}>
                            { data.map((item) => {
                                return (
                                    <div key={item._id} onClick={() => { leftClick(item)}} className={`${style.left_item} ${leftActive === item.name ? style.item_native : ''}`} >{item.name}</div>
                                )
                            })}
                        </div>
                        <div className={style.right} style={{height: height + 'px',paddingBottom: '80px',marginTop: '5px'}}>
                            {
                                list.map((item) => {
                                    return (
                                        <div key={item._id} onClick={() => { rightClick(item)}} className={`${style.right_item} ${rightActive === item.name ? style.item_native : ''}`}>{item.name}</div>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
            </Modal>
        </>
    )
}
